<template>
  <div>
    <!-- 样式配置 -->
    <el-tabs v-model="activeName" type="border-card" class="demo-tabs">
      <el-tab-pane label="样式设置" name="first">
        <Common></Common>
      </el-tab-pane>
      <!-- 数据配置 -->
      <el-tab-pane label="数据配置" name="second">
        <el-form label-width="100px" label-position="left">
          <el-form-item label="标题名称:">
            <el-input
              v-model="modelItem.data.title"
              type="text"
              maxlength="15"
              show-word-limit
            />
          </el-form-item>
          <el-form-item label="求职类型:">
            <el-select
              v-model="modelItem.data.jobSearchType"
              class="m-2"
              placeholder="Select"
            >
              <!-- <el-switch v-model="modelItem.data.isShow.jobSearchType" /> -->
              <el-option
                v-for="(item, index) in jobSearchTypeList"
                :key="index"
                :label="item"
                :value="item"
              />
            </el-select>
            <el-switch v-model="modelItem.data.isShow.jobSearchType" />
          </el-form-item>
          <el-form-item label="意向岗位:">
            <el-input
              v-model="modelItem.data.intendedPositions"
              type="text"
              maxlength="15"
              show-word-limit
            />
            <el-switch v-model="modelItem.data.isShow.intendedPositions" />
          </el-form-item>
          <el-form-item label="意向城市:">
            <el-input
              v-model="modelItem.data.intendedCity"
              type="text"
              maxlength="15"
              show-word-limit
            />
            <el-switch v-model="modelItem.data.isShow.intendedCity" />
          </el-form-item>
          <el-form-item label="期望薪酬:">
            <el-select
              v-model="modelItem.data.expectSalary"
              class="m-2"
              placeholder="Select"
            >
              <el-option
                v-for="(item, index) in expectSalaryList"
                :key="index"
                :label="item"
                :value="item"
              />
            </el-select>
            <el-switch v-model="modelItem.data.isShow.expectSalary" />
          </el-form-item>
          <el-form-item label="求职状态:">
            <el-select
              v-model="modelItem.data.jobStatus"
              class="m-2"
              placeholder="Select"
            >
              <el-option
                v-for="(item, index) in jobStatusList"
                :key="index"
                :label="item"
                :value="item"
              />
            </el-select>
            <el-switch v-model="modelItem.data.isShow.jobStatus" />
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import Common from '@/options/Common.vue'
import selectModelItem from '@/hooks/selectModel.ts' //当前选中模块
const modelItem = selectModelItem()
const activeName = ref('first')

/**
 * 数据配置
 */
const jobSearchTypeList: Array<string> = reactive(['全职', '兼职', '实习'])
const jobStatusList: Array<string> = reactive([
  '随时入职',
  '一周内到岗',
  '一个月内到岗',
  '面议',
])
const expectSalaryList: Array<string> = reactive([
  '2000-4000￥',
  '4000-6000￥',
  '6000-8000￥',
  '8000-10000￥',
  '10000-12000￥',
  '12000-15000￥',
  '15000￥以上',
])
</script>
<style lang="scss" scoped>
:deep(.el-input) {
  width: 80%;
  height: 27px;
  line-height: 27px;
  margin-right: 2px;
}

:deep(.el-form-item__label) {
  font-size: 13px;
}
:deep(.el-tabs--border-card) {
  border: 0;
}
/* 日期选择器 */
:deep(.el-range-editor.el-input__wrapper) {
  width: 200px;
}
</style>
